Everything below is generated from one set of files: tokens/renewcms.css (Tailwind @theme, :root, .dark, article content styles), tokens/ui.config.ts (Nuxt UI colors, icons and component overrides) and tokens/vite.config.ts. The tables on this page read those files, so they can't drift.
The mark is a white R on a black square, drawn on a 16-pixel grid so it stays sharp as a favicon. It keeps the same geometry at every size. In dark mode the black square gets a 1 px #444 edge so it doesn't disappear into the background. The wordmark pairs the mark with RenewCMS in Plex Sans Semibold, with the text set at 0.6× the mark's height.
Favicon file: brand/favicon.svg. The 1 px edge switches on with prefers-color-scheme: dark. Keep clear space of at least half the mark's height around it. The R is never recolored or placed on sand.
Seven Tailwind color scales, each mapped to a Nuxt UI alias. The ink, chalk and sand scales are built on your brand values. The four semantic scales are new and deliberately muted: evenly spaced oklch lightness steps with low chroma, so they sit comfortably next to ink and sand.
Every --ui-* variable Nuxt UI reads, for both themes. Surfaces are white. The #fafafa brand background is the page canvas behind them. The theme follows the system setting until the owner picks Light or Dark from the user menu, and that choice is stored by Nuxt UI's color mode.
Each ratio is computed from the variables above against WCAG 2.2 AA: 4.5:1 for text and 3:1 for control edges and focus rings. Soft alerts are measured against a 10% tint of the color over the surface, which is how Nuxt UI renders them. {{ passSummary }}
The interface uses IBM Plex Sans in three weights: 400, 500 and 600. IDs, paths, counters and code are set in IBM Plex Mono. Sizes replace Tailwind's text-* defaults. On screens narrower than md, form fields use 16 px so iOS doesn't zoom in when a field gets focus.
Article content uses a separate scale in Source Serif 4, applied through the .article-content class. The editor surface and the preview both use it, so what the owner writes looks like what a public site would roughly show. The measure is capped at 42 rem, about 70 characters per line.
Cement traps moisture in solid walls. Lime lets the stone breathe, which is why we strip it back on almost every farmhouse we take on.
It sets slowly, and that is the point.
Spacing uses Tailwind's 4 px base unit unchanged. Radius is 0 everywhere: setting --ui-radius: 0rem flattens every component that derives its corners from it, and rounded-none overrides cover the few that hard-code rounded-full. The density is compact on desktop. On touch screens, every tap target is at least 44 px.
Most surfaces are flat and separated by hairlines. Shadows appear only on things that float above the page.
--ui-border. Cards, table edges, sidebar and top bar dividers. Decorative, so no contrast requirement.--ui-border-accented. Inputs, selects, checkboxes, outline buttons. 3.6:1 on white.--ui-primary outline with a 2 px offset, shown only on :focus-visible. Nuxt UI's default, kept.--shadow-popover. Dropdown menus, selects, toasts. In dark mode it becomes a darker shadow plus the hairline.--shadow-modal over a 40% chalk-950 overlay. Modals and slideovers.Motion is there to show where something came from or that something is working. It is short and never decorative.
prefers-reduced-motion: reduce, every transition and animation completes instantly, skeletons stop pulsing and become flat blocks, and toasts appear without sliding. The one exception is the spinner on the automatic verification screen. It keeps turning, slowed to 1.6 s per rotation, because it is the only sign that work is happening.Lucide through Iconify, using Nuxt UI's i-lucide-* classes. Icons are 16 px next to 13–14 px text and 20 px on mobile top bars. They are always paired with a visible label or an aria-label. Each icon maps to one meaning: Eye is only ever show password, and Preview uses Book Open.
Ready to paste into the repository. They follow its code style: tabs, no semicolons, single quotes and no comments. The CSS goes in src/assets/main.css and the config in src/theme/ui.config.ts. Add class="isolate" to the app root, as Nuxt UI requires.
{{ code }}